<template>
  <el-table :data="dataList" border style="width: 100%" height="400">
    <el-table-column prop="id" label="ID" width="50" />
    <el-table-column prop="stamptime" label="日期">
      <template #default="scope">
        {{ new Date(scope.row.stamptime).toLocaleString() }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="140">
      <template #default="scope">
        <el-button size="small" type="success" @click="handleSelect(scope.row)"> 选择 </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { db } from '../utils/db.js'
import { ref, onMounted, defineEmits } from 'vue'

const emits = defineEmits(['recover'])
const dataList = ref([])

const getList = async () => {
  dataList.value = await db.items.toArray()
  console.log(dataList.value)
}

const handleDelete = (row) => {
  db.items.where('id').equals(row.id).delete()
  getList()
}

const handleSelect = (row) => {
  const obj = JSON.parse(row.name)
  emits('recover', obj)
}

onMounted(() => {
  getList()
})
</script>

<style scoped></style>
